Alle moderne Browser stellen Tools für Web-Entwickler zur Verfügung.
Der Aufruf erfolgt entweder über einem Menu, Funktionstaste 12 oder der Tastenkombination CTRL + SHIFT + i
Leider sind die Bezeichnungen für jeden Browser etwas anders, dazu kommen die eigenen Spracheinstellungen.
Oft findet man desswegen in diesen Turm bei Babel die einfachsten Funktionen nicht und oft ist auch das Funktionsangebot der Browser unterschiedlich. Der IE erlaubt zum Beispiel keine Konsoleeingaben
Ich arbeite mit Firefox ab Version 115 (Stand 20.02.2024)
Einfacher Start (Konsole)
Aufruf der Konsole im Browser: F12 Taste (FF und Chrome) oder die Tastenkombination CTRL + SHIFT + i (FF, Opera ...)
Tab Console bzw Konsole auswählen und 'Log' aktivieren
Wenn du das "Willkommen" siehst, bist du richtig
Zu kannst im Mehrzeilen- oder Einzelzeilen-Modus arbeiten
Als Beispiel: kopiere den Code hier unten in die Konsole und führe ihn aus
Man kann mit JavaScript auch direkt aus der Konsole die aktuelle Webseite beeinflussen.
Beispiel den FarbStyle der Textarea ändern: document.querySelector("textarea").style.backgroundColor = "#ffd561";
Das bewirkt, dass der im Browserspeicher vorhandene Quellcode angepasst wurde.
Inspektor
...kann auch 'Elements' (Opera) heissen
Der Inspektor ist eigentlich die Kopie des Quellcodes der Seite, den man editieren kann und wenn man mit der Maus über die einzelnen TAG-Blöcke fährt werden die entsprechenden Elemente auf der Seite hervorgehoben.
Umgekehrt kann (nachdem man das Symbol neben dem Tab-Titel aktiviert hat) über die Elemente auf der Seite fahren und die entsprechenden TAG-Blöcke werden auf dem Code hervorgehoben
Debugger
Der Debugger hilft Fehler in den Java-Scripts zu identifizieren.
Hier 2 Tasten, die den BrowserBack simulieren, der zweiter hat einen Fehler. Klicke darauf und der Debugger hebt den Fehler hervor.
Man kann den Debugger an individuelle Erfordernisse anpassen. Zum Beispiel, dass er bei Fehlern dan Ablauf stoppt, danach kann step by step weiter gefahren werden.
Leider zeigt es nicht an, wie es richtig sein soll. Aber auf der Konsole kann der fehlerhafte Ausdruck getestet werden
Netzwerkanalyse
Hat eigentlich weniger mit JavaScripts zu tun, aber da auch die Ladezeit von externen JavaScripts misst, können so Blocker erkannt werden.
Ich gehe hier nicht mehr darauf ein, aber möchte hinweisen, dass alle geladenen Scripte, CSS und Medien aufgelistet werden. Interessant zu sehen, welche Abfragen und Antworten fremde Seiten aus/auf unseren PC liest.
Stilebearbeitung
Das hat nichts mit JavaScripts zu tun, aber interessant wie CSS sich auf der Seite verhält.
Auch werden die Sysles direkt als Option im Tag hier nicht aufgezeigt
Zum testen habe ich <style> und <link> definiert. Der Style in <textarea> wird in 'Stilebearbeitung' ignoriert
Laufzeitanalyse
Das hat nichts mit JavaScripts zu tun
Man kan die Performance einer Internet-Sitzung messen und abspeichern um eventuelle Blocker zu finden.
Web-Speicher
(Auch diese Funktion heisst zum Beispiel in Opera oder Chrome "App" danach im Menu "Speicher")
Das hat eigentlich nichts mit JavaScripts zu tun, ausser man will die gesetzten Cookies suchen
Wenn du den Webspeicher bei Cookies offen hast, kannst du ein
und sehen wie es sich verhält.
Barrierefreiheit
Überprüfe deine Seite ob sie auch für User mit Sehschwäche geeignet ist
Das Tool weist auf mangelnden Kontrast, Betitelung von Medien, lücken- sprung-hafte Abstufung der Kapitel (Dokumentstruktur) und Vieles mehr hin
Ich selber vergesse diese Überprüfung zu oft und bitte um Hinweise bei Unterlassungen.
Vielen Dank!
Simulatoren
Schau wo das Symbol (oder Ähnliches) ist (meisten in irgend einer Ecke versteckt)
Beim Klick schaltest du auf eine Smartphonesimulation, die du durch Useragent und weiteren Angaben ziemlich genau auf einem spezifischen Gerät eichen kannst.
Alles andere
Das hat nichts mit JavaScripts zu tun und ist für mich zu kompliziert, aber Nichts hält dich zurück zu experimentieren
(oder Ähnliches) ist (meisten in irgend einer Ecke versteckt)